<style lang="less">
	page{
		background: #f6f6f6;
	}
	.content {
		text-align: center;
	}
	.main-top{
		background: #FFFFFF;
		box-sizing: border-box;
		position: relative;
		.bj{
			display: block;
			width: 100%;
		}
		.main-top-pos{
			position: absolute;
			top: 50upx;
			left: 0;
			width: 100%;
			.money-info-top{
				display: flex;
				justify-content: space-between;
				padding: 0 50upx;
				align-items:center;
				.money-info-top-fl{
					display: flex;
					.touxiang{
						width: 100upx;
						border-radius: 50%;
					}
					.name-info{
						flex: 1;
						margin-left: 10upx;
						overflow: hidden;
						text-align: left;
						.name{
							font-size:30upx;
							font-weight:bold;
							color:rgba(51,51,51,1);
							line-height:36upx;
							margin-top: 10upx;
							text-align: left;
						}
						.pointRed{
							margin-left: 20upx;
							font-size: 18upx;
							font-weight: 400;
							color: #E93246;
							line-height: 24upx;
						}
						.memberTyp{
							display: inline-block;
							line-height: 36upx;
							border: 2upx solid #000000;
							border-radius: 18upx;
							font-size: 20upx;
							font-weight: bold;
							color: #000000;
							padding: 0 20upx;
							margin-top: 20upx;
							box-sizing: border-box;
						}
						.vipclass{
							width: 250upx;
							height: auto;
							display: block;
							margin-top: 20upx;
						}
					}
				}
				// .money-info-top-fr.tes{
				// 	position: relative;
				// }
				// .money-info-top-fr{
				// 	.dj-xia{
				// 		font-size:20upx;
				// 		font-weight:500;
				// 		color:rgba(150,126,70,1);
				// 		line-height:36upx;
				// 		margin-top: 10upx;
				// 	}
				// 	.progress-pos{
				// 		position: relative;
				// 		progress{
				// 			border-radius: 22upx;
				// 			width: 260upx;
				// 			overflow: hidden;
				// 		}
				// 		.progress-meber{
				// 			position: absolute;
				// 			left: 20upx;
				// 			top: 0;
				// 			font-size:24upx;
				// 			font-family:'DINCond';
				// 			font-weight:400;
				// 			color:#333333;
				// 			line-height:44upx;
				// 		}
				// 	}
				// 	.zuigao{
				// 		width: 214upx;
				// 		height: auto;
				// 		margin-right: -20upx;
				// 	}
				// 	.jibie{
				// 		position: absolute;
				// 		left: 80upx;
				// 		font-size:28upx;
				// 		top: 0;
				// 		font-weight:bold;
				// 		line-height: 70upx;
				// 		color:rgba(51,51,51,1);
				// 	}
				// }
			}
		}
	}
	.main-list{
		margin-bottom: 20upx;
		background: #FFFFFF;
	}
	.main-list-title{
		display: flex;
		justify-content: space-between;
		padding: 0 30upx;
		align-items: center;
		.main-list-title-fl{
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:90upx;
		}
		.main-list-title-fr{
			font-size:22upx;
			font-weight:500;
			color:rgba(153,153,153,1);
			line-height:90upx;
		}
		.main-list-title-time{
			font-size:26upx;
			color:rgba(51,51,51,1);
			line-height:29upx;
			.xuanze{
				width: 20upx;
				height: auto;
				margin-left: 10upx;
			}
		}
		
	}
	.main_list_btn{
		display: flex;
	}
	.btns_item{
		margin-left: 16upx;
		border: 1upx solid #333333;
		border-radius: 30upx;
		font-size:20upx;
		font-family:'DINCond';
		font-weight:400;
		color: #333333;
		line-height:20upx;
		padding: 8upx 16upx 8upx 12upx;
		&:first-of-type{
			margin-left: 0;
		}
	}
	.phone{
		background: url('../../static/img/h5TeamPhone.png') no-repeat 12upx center/ 16upx 20upx;
		padding-left: 36upx;
	}
	.wexin{
		background: url('../../static/img/h5TeamPhoneWeixin.png') no-repeat 12upx center/ 24upx 20upx;
		padding-left: 46upx;
	}
	.main-list-cen{
		overflow: hidden;
		.main-list-cen-for{
			width: 33.33%;
			float: left;
			border-top:2upx solid #ededed;
			border-right:2upx solid #ededed;
			box-sizing: border-box;
			color:rgba(51,51,51,1);
			padding: 20upx 0;
			.num{
				font-size:40upx;
				font-family: 'DINCond';
				font-weight:400;
				line-height:48upx;
			}
			.point{
				line-height:40upx;
				background:rgba(219,194,145,1);
				border-radius:20upx;
				font-size:20upx;
				font-family:'DINCond';
				width: 250upx;
				margin: 0 auto;
				font-weight:400;
				// margin: 15upx 8upx;
				color:rgba(51,51,51,1);
			}
			.progress-pos{
				position: relative;
				progress{
					border-radius: 20upx;
					width: 250upx;
					overflow: hidden;
					margin: 0 auto;
				}
				.progress-meber{
					position: absolute;
					left: 50%;
					margin-left: -115upx;
					top: 0;
					font-size:24upx;
					font-family:'DINCond';
					font-weight:400;
					color:#333333;
					line-height:44upx;
				}
			}
			.zuigao{
				font-size:24upx;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height:48upx
			}
			.num.tes{
				font-weight:bold;
				color:#c4ae84 ;
			}
			.name{
				font-size:24upx;
				font-weight:500;
				line-height:29upx;
				margin-top: 20upx;
			}
			.name.tes{
				font-weight:bold;
				color:#c4ae84 ;
			}
		}
		.main-list-cen-for.jifen{
			width: 50%;
		}
		.main-list-cen-for:nth-child(3){
			border-right:none;
		}
		.main-list-cen-for:nth-child(6){
			border-right:none;
		}
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		margin-top: 20upx;
		width: 750upx;
		height: 540upx;
		background-color: #FFFFFF;
		padding: 20upx 0;
		.qiun-charts-title{
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			line-height:40upx;
		}
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.zhao{
		   position: fixed;
		   left: 0;
		   top: 0;
		   bottom: 0;
		   right: 0;
		   background: #000000;
		   opacity: 0.4;
		   z-index: 999;
	}
	.popup{
		   width: 100%;
		   position: fixed;
		   bottom: 0;
		   left: 0;
		   z-index: 1000;
	}
	.popup_phone{
		   padding: 0 30upx 50upx;
		   .popup_phone_list{
			   width: 100%;
			   margin-top: 20upx;
			   padding: 36upx 0;
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   background-color: #FFFFFF;
			   border-radius: 46upx;
			   .popup_phone_list_img{
				   width: 16upx;
				   height: 22upx;
				   margin-right: 20upx;
			   }
			   text{
				   font-size: 26upx;
				   font-weight: 600;
				   line-height: 26upx;
				   font-family: "DINCond";
				   color: #0099CC;
			   }
		   }
	}
</style>
<template>
	<view class="content">
		<view class="main-top">
			<image src="/static/img/wdfs_bgpics.png" class="bj" mode="widthFix"></image>
			<view class="main-top-pos">
				<view class="money-info-top">
					<view class="money-info-top-fl">
						<image v-if="myTeam.headIco!='' && myTeam.headIco!=null && myTeam.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+myTeam.headIco" class="touxiang" mode="widthFix"></image>
						<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="touxiang" mode="widthFix"></image>
						<view class="name-info">
							<view class="name">{{myTeam.username}}</view>
							<view v-if="myTeam.memberTypeStr!='' && myTeam.memberTypeStr!=null && myTeam.memberTypeStr!=undefined" class="memberTyp">{{myTeam.memberTypeStr}}</view>
							<text class="pointRed">{{myTeam.promotionNeedPoint}}</text>
						</view>
					</view>
					<view class="main_list_btn">
						<block v-if="myTeam.mobile != '' && myTeam.mobile != null">
							<view class="btns_item phone" @tap="openpopupPhone(myTeam.areaCode,myTeam.mobile)">电话</view>
							<view class="btns_item wexin" v-if="fansFlag == true" @tap="openWinXin(myTeam.mobile)">微信</view>
						</block>
						<!-- <view class="btns_item"  v-if="myTeam.memberType == 'middle' || myTeam.memberType == 'big'">发起会话</view> -->
					</view>
					<!-- <view class="money-info-top-fr">
						<view class="mobile">{{myTeam.mobile}}</view>
					</view> -->
				<!-- 	<view class="money-info-top-fr" v-if="myTeam.memberType != 'big'">
						<view class="progress-pos">
							<progress :percent="percentage" activeColor="#FFFFFF" stroke-width="22" backgroundColor="rgba(255,255,255,0.4)"/>
							<view class="progress-meber">¥ {{promotionAmount}} / ¥ {{promotionNeedAmount}}</view>
						</view>
						<view v-if="myTeam.memberType === 'middle'" class="dj-xia">下一等级：熊猫大将</view>
						<view v-else-if="myTeam.memberType === 'small'" class="dj-xia">下一等级：熊猫中将</view>
						<view v-else-if="myTeam.memberType === 'general'" class="dj-xia">下一等级：熊猫小将</view>
					</view>
					<view class="money-info-top-fr tes" v-else-if="myTeam.memberType === 'big'">
						<image src="/static/img/level_hignest@2x.png" class="zuigao" mode="widthFix"></image>
						<view class="jibie">最高级别</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="main-list">
			<view class="main-list-title">
				<view class="main-list-title-fl">TA的信息</view>
				
			</view>
			<view class="main-list-cen">
				<view class="main-list-cen-for jifen">
					<view class="point">{{myTeam.point}}</view>
					<view class="name">积分余额</view>
				</view>
				<!-- <view class="main-list-cen-for jifen" v-if="myTeam.memberType == 'big'">
					<view class="zuigao">最高等级</view>
					<view class="name">累计业绩</view>
				</view> -->
				<view class="main-list-cen-for jifen">
					<view class="progress-pos">
						<progress :percent="percentage" activeColor="#DBC291" stroke-width="20" backgroundColor="rgba(219,194,145,0.4)"/>
						<view class="progress-meber">¥ {{promotionAmount}} / ¥ {{promotionNeedAmount}}</view>
					</view>
					<!-- <view class="num">{{myTeam.point}}</view> -->
					<view class="name">累计业绩</view>
				</view>
			</view>
		</view>
		<view class="main-list">
			<view class="main-list-title">
				<view class="main-list-title-fl">TA的粉丝</view>
				<!-- <view class="main-list-title-fr" @tap="fans(myTeam.userId)">查看详情 ></view> -->
			</view>
			<view class="main-list-cen">
				<view class="main-list-cen-for">
					<view class="num">{{myTeam.bigFans}}</view>
					<view class="name">至尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{myTeam.middleFans}}</view>
					<view class="name">金尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{myTeam.smallFans}}</view>
					<view class="name">银尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{myTeam.generalFans}}</view>
					<view class="name">VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{myTeam.touristFans}}</view>
					<view class="name">注册会员</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num tes">{{group_z}}</view>
					<view class="name tes">总人数</view>
				</view>
			</view>
		</view>
		<view class="main-list">
			<view class="main-list-title">
				<view class="main-list-title-fl">团队熊猫新增</view>
				<view class="main-list-title-time" @tap="toggleTab('yearMonth')">
					{{mydate}}
					<image src="/static/img/arrowup_xia@2x.png" class="xuanze" mode="widthFix"></image>
				</view>
			</view>
			<view class="main-list-cen">
				<view class="main-list-cen-for">
					<view class="num">{{bigNum}}</view>
					<view class="name">至尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{middleNum}}</view>
					<view class="name">金尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{smallNum}}</view>
					<view class="name">银尊VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{generalNum}}</view>
					<view class="name">VIP</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num">{{touristNum}}</view>
					<view class="name">注册会员</view>
				</view>
				<view class="main-list-cen-for">
					<view class="num tes">{{allNum}}</view>
					<view class="name tes">总人数</view>
				</view>
			</view>
			<w-picker
				mode="yearMonth" 
				startYear="2016"
				:current="true"
				@confirm="onConfirm"
				:disabledAfter="true"
				ref="yearMonth" 
				themeColor="#f00"
			></w-picker>
			<view class="qiun-charts">
				<view class="qiun-charts-title">{{mydate}} 团队熊猫总人数趋势图</view>
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			</view>
		</view>
		<view class="zhao" v-if="hidden"></view>
		<view class="popup" v-if="hidden">
			<view class="popup_phone" v-if="popupFlag == 1">
				<view class="popup_phone_list" @tap="openPhone">
					<image src='https://static.xpandago.net/wechat/images/h5TeamPhone.png' class="popup_phone_list_img"></image>
					<text>呼叫 {{mobile}}</text>
				</view>
				<view class="popup_phone_list" @tap="cancelPhone">
					<text>取消</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import api from '@/common/api';
	import uCharts from '@/components/u-charts/u-charts.js';
	import wPicker from "@/components/w-picker/w-picker.vue";
	import webView from '@/common/webView'
	var _self;
	var canvaLineA=null;
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				fansFlag:'',
				mobile:'',
				popupFlag: 1,
				hidden: false,
				allNum:"",
				bigNum:"",
				middleNum:"",
				smallNum:"",
				generalNum:"",
				touristNum:'',
				myTeam:{},
				promotionAmount:'',//下个等级
				promotionNeedAmount:'',//下个等级金额
				percentage:0,//百分比
				group_z:'',
				id:'',
				//图表
				mydate:'',
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		onLoad(options) {
			// console.log(options)
			if(options.fansFlag != '' && options.fansFlag != null && options.fansFlag != undefined){
				this.fansFlag = true
			}
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			// 获取当前年月
			var date=new Date;
			 var year=date.getFullYear(); 
			 var month=date.getMonth()+1;
			 month =(month<10 ? "0"+month:month); 
			 this.mydate = (year.toString()+'-'+month.toString());
			this.id=options.id
			this.myFans()
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.myFans()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			// // 打开微信
			openWinXin(mobile){
				let that=this
			  uni.setClipboardData({
				data:mobile,
				success (res) {
				  uni.showToast({
					title: '复制成功',
					icon:"none"
				  })
				  that.openGoods()
				}
			  })
			  
			},
			//返回app
			openGoods() {
				const userStr = navigator.userAgent
				let that=this
				if (userStr.indexOf('Android') !== -1) {
				 let params={type:'openWeChat'}
				 window.Android.showInfoFromJs(JSON.stringify(params))
				} else {
				  webView.callhandler('openWeChat', {}, (data) => {
				  })
				}
			},
			//  拨打电话
			openPhone(){
				uni.makePhoneCall({
					phoneNumber: this.mobile,
					success(){
						console.log('调用成功')
					},
					fail(){
						console.log("调用失败")
					}
				})
			},
			//  打开电话弹窗
			openpopupPhone(areaCode,mobile){
				this.mobile = areaCode + mobile
				this.hidden = true
				this.popupFlag = 1
			},
			cancelPhone(){
				this.hidden = false
			},
			async myFans(){
				const [err, res] = await api.myFans({
					query:{
						userId:this.id
						// userId:580
					},
					 header:{
						'Content-Type': 'application/json',
					 }
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 this.myTeam=res.data.myTeam
					 this.group_z=res.data.myTeam.bigFans+res.data.myTeam.middleFans+res.data.myTeam.smallFans+res.data.myTeam.generalFans+res.data.myTeam.touristFans;
					 // if(this.myTeam.memberType !='big'){
						 this.promotionAmount=res.data.myTeam.promotionAmount
						 this.promotionNeedAmount=res.data.myTeam.promotionNeedAmount
						 let percentageInfo=Number(this.promotionAmount)/Number(this.promotionNeedAmount)
						 this.percentage=percentageInfo*100
					 // }
					  this.getFansForMonth()
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					if(res.data.code==200){
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.reLaunch({
							  url: "/pages/login/loginWechat"
							})
						}, 1000);
					}
				 }
			},
			async getFansForMonth(){
				const [err, res] = await api.getFansForMonth({
					query: {
						userId:this.id,
						date:this.mydate,
						isDirectly:0
					}
				 });
				 if(res.data.code == 0){
					 this.allNum=res.data.data.allNum
					 this.bigNum=res.data.data.bigNum
					 this.middleNum=res.data.data.middleNum
					 this.smallNum=res.data.data.smallNum
					 this.generalNum=res.data.data.generalNum
					 this.touristNum=res.data.data.touristNum
					 let LineA={categories:[],series:[]};
					 //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					 // LineA.categories=res.data.data.LineA.categories;
					 LineA.categories=res.data.data.dateList;
					 LineA.series=[{
						 name: '-总人数新增-',
						 data:res.data.data.allNumList ,
						 color: '#E93246'
					 },{
						 name: '-至尊VIP新增-',
						 data:res.data.data.bigNumList ,
						 color: '#0099FF'
					 },{
						 name: '-金尊VIP新增-',
						 data:res.data.data.middleNumList ,
						 color: '#039D56'
					 },{
						 name: '-银尊VIP新增-',
						 data:res.data.data.smallNumList ,
						 color: '#FCC133'
					 },{
						 name: '-VIP新增-',
						 data:res.data.data.generalNumList ,
						 color: '#5249CB'
					 },{
						 name: '-注册会员-',
						 data:res.data.data.touristNumList ,
						 color: '#DBC291'
					 }]
					 // _self.textarea = JSON.stringify(res.data.data.LineA);
					 _self.showLineA("canvasLineA",LineA);
				 }
			},
			//选择日期
			toggleTab(str){
				this.$refs[str].show();
			},
			//组件选择返回的参数
			onConfirm(val){
				this.mydate=val.result;
				this.getFansForMonth();
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						position:'top',
						lineHeight:11,
						margin:5,
					},
					dataLabel:true,
					dataPointShape:true,
					dataPointShapeType:'hollow',
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:15,
						scrollShow:true,
						scrollAlign:'left'
					},
					yAxis: {
						//disabled:true
						gridType:'dash',
						splitNumber:8,
						min:0,
						max:30,
						format:(val)=>{return val.toFixed(0)}//如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					},
				});
				
			},
			touchLineA(e){
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			//查看详情
			fans(id){
				uni.navigateTo({
				  url: "/pages/myFansDetail/myFansDetail?id="+id
				})
			},
		}
	}
</script>
